<template>
	<el-dialog
		@open="open()"
		width="500px"
		:show-close="false"
		v-model="visible"
		:title="!dataForm.id ? '新增功能' : '修改功能'"
		:close-on-click-modal="false"
	>
		<div class="cc-flex flex-h-center">
			<div style="width: 350px">
				<el-form label-position="top" ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px" @keyup.enter="submitHandle()">
					<el-form-item prop="type" label="功能类型">
						<el-select @change="typeChange" clearable style="width: 100%" v-model="dataForm.type">
							<el-option v-for="item in EFunctionTypeList.filter(f => f.value != null)" :key="item.value" :label="item.name" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="父级" prop="parentId">
						<el-tree-select
							node-key="id"
							clearable
							value-key="id"
							style="width: 100%"
							:props="treeProps"
							:filter-node-method="filterNodeMethod"
							filterable
							v-model="dataForm.parentId"
							:data="treeDataSelect"
							:check-strictly="true"
						/>
					</el-form-item>
					<el-form-item prop="name" label="功能名称">
						<el-input clearable v-model="dataForm.name"></el-input>
					</el-form-item>
					<el-form-item prop="code" label="功能代码">
						<el-input clearable v-model="dataForm.code"></el-input>
					</el-form-item>
					<template v-if="dataForm.type == EFunctionType.page || dataForm.type == EFunctionType.menu">
						<el-form-item prop="icon" label="图标类名">
							<el-input clearable v-model="dataForm.icon"></el-input>
						</el-form-item>
						<el-form-item prop="route" label="路由地址">
							<el-input clearable v-model="dataForm.route"></el-input>
						</el-form-item>
						<el-form-item prop="component" label="组件地址">
							<el-input clearable v-model="dataForm.component"></el-input>
						</el-form-item>
						<el-form-item prop="sort" label="排序">
							<el-input clearable v-model="dataForm.sort"></el-input>
						</el-form-item>
						<el-form-item prop="cache" label="是否缓存">
							<el-radio-group v-model="dataForm.isCache" class="ml-4">
								<el-radio :label="true">是</el-radio>
								<el-radio :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</template>
				</el-form>
			</div>
		</div>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { ElMessage, FormRules } from 'element-plus/es'
import { MFunction, PermissionService, EFunctionType, EFunctionTypeList } from '@/modules/permission'

const emit = defineEmits<{
	(e: 'refreshDataList', value?: string | undefined): void
}>()
const treeProps = {
	label: 'name'
}

const visible = ref(false)
const dataFormRef = ref()
const treeDataSelect = ref<MFunction[]>([])
const dataForm: MFunction = reactive({
	id: undefined,
	parentId: -1,
	sort: 1,
	isCache: true,
	name: '',
	code: '',
	component: '',
	icon: '',
	route: '',
	cache: false,
	type: EFunctionType.menu
})

const dataRules = reactive<FormRules>({
	parentId: [
		{ required: false, message: '请选择父级', trigger: ['blur', 'change'] },
		{
			validator(rule, value, callback) {
				if (value && value === dataForm.id) {
					return callback(new Error('本级不能做本级的父级'))
				}
				return callback()
			}
		}
	],
	// buttonParentId: [
	// 	{ required: true, message: '请选择父级', trigger: ['blur', 'change'] },
	// 	{
	// 		validator(rule, value, callback) {
	// 			if (value && value === dataForm.id) {
	// 				return callback(new Error('本级不能做本级的父级'))
	// 			}
	// 			return callback()
	// 		}
	// 	}
	// ],
	name: [{ required: true, message: '请输入名称', trigger: ['blur', 'change'] }],
	sort: [{ required: true, message: '请输入排序号', trigger: ['blur', 'change'] }],
	code: [{ required: true, message: '请输入代码', trigger: ['blur', 'change'] }],
	icon: [{ required: true, message: '请输入图标类名', trigger: ['blur', 'change'] }],
	type: [{ required: true, message: '请选择功能类型', trigger: ['blur', 'change'] }]
	// component: [{ required: true, message: '请输入组件路径', trigger: ['blur', 'change'] }],
	// route: [{ required: true, message: '请输入路由地址', trigger: ['blur', 'change'] }],
})
function open() {
	PermissionService.getFunctionTree().then((res: any) => {
		treeDataSelect.value = res
	})
}

function typeChange(type: EFunctionType) {
	if (type == EFunctionType.button) {
		;(dataRules.parentId as any[])[0].required = true
	} else {
		;(dataRules.parentId as any[])[0].required = false
	}
}

function filterNodeMethod(value: any, data: any) {
	if (!value) return true
	return data.name.includes(value) && data.type != EFunctionType.button
}
async function init(isAppend: boolean, data?: MFunction) {
	visible.value = true
	dataForm.id = undefined
	await dataFormRef.value?.resetFields()
	if (isAppend) {
		Object.assign(dataForm, { parentId: data?.id })
	} else {
		if (!data) Object.assign(dataForm, {})
		else Object.assign(dataForm, JSON.parse(JSON.stringify(data)))
	}
}

// 表单提交
function submitHandle() {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		PermissionService.editFunctionItem(dataForm).then(res => {
			visible.value = false
			emit('refreshDataList')
			ElMessage.success({
				message: '操作成功',
				duration: 1000
			})
		})
	})
}

defineExpose({
	init
})
</script>
<style scope lang="scss">
</style>
